import React from 'react'
import { useParams } from 'react-router-dom';
import { Avatar, Divider, Image} from 'antd';
import { UserOutlined } from '@ant-design/icons';

import "./style/DMManagement.less"

export default function DMInformation() {
    /* 1.这里可以用路由的params路径参数，
       2.也可以使用useLocation中的state传参方法
       我认为管理端无所谓但是用户端为了不在url上暴露信息，还是采用方法2更好
    */
    const { id } = useParams();

    let dmInfromation = {
        id: 1,
        name: '张三',
        nickName: "法外狂徒",
        sex: '男',
        age: 33,
        phone: 13366668888,
        level: 3,
        experienceYear: 3,
        hosted: 50,
        goodReview: 30,
        mediumReview: 10,
        badReview: 10,
        description: "DM最早来源于地下城与勇士中的称呼，后来逐渐被运用到剧本杀中，指的是剧本杀游戏中的主持人，带领各位玩家完成这场游戏，他们会推动故事情节的发展，也是在游戏中的关键人物。",
        headPortrait: "url",
        img: "url",
    }
    return (
        <div className='dm-infromation'>
            <div className='base-info'>
                <Avatar size={64} icon={<UserOutlined />} />
                <span>姓名: {dmInfromation.name}</span>
                <span>昵称: {dmInfromation.nickName}</span>
                <span>性别: {dmInfromation.sex}</span>
                <span>年龄: {dmInfromation.age}</span>
                <span>电话: {dmInfromation.phone}</span>
                <span>level: {dmInfromation.level}</span>
                <Image width={200} src="https://imageproxy.pimg.tw/resize?url=https://i.imgur.com/hWghm6oh.jpg" />
                <br/>
                <span>描述: {dmInfromation.description}</span>
            </div>

            <hr className="divider" />

        </div>
        
    )
}
